<template>
  <div class="page-common-layout">
    <div class="page-common-content">
      <tool-bar
				@search="$refs.table.refresh(true)"
				@reset="
					() => {
					(this.queryParam = {}), $refs.table.refresh(true);
					}
				"
      >
        <!--toolBar-->
        <template slot="toolBtn" slot-scope="scope">
          <a-button
						class="cu-btn-primary" icon="plus"
						@click="handleAdd()"
          >{{$ct("add","新增")}}
          </a-button>
        </template>

        <!--search -->
        <template slot="toolForm">
          <a-form-item :label="$ct('languageName','语言名称')">
            <a-input v-model="queryParam.configKey" :placeholder="$ct('languageName','语言名称')"/>
          </a-form-item>
          <a-form-item :label="$ct('languageCode','语言编码')">
            <a-input v-model="queryParam.configValue" :placeholder="$ct('languageCode','语言编码')"/>
          </a-form-item>
        </template>
      </tool-bar>

      <!--	table	 -->
      <DataGrid
				ref="table"
				:columns="columns"
				:url="url"
				:queryParam="queryParam"
        :showRowSelect="false"
				rowKey="uuid"
      >
        <span slot="status" slot-scope="{ text, record }">
					<a-switch size="small" :disabled="text == 'config_status.01'?true:false" :checked="text == 'config_status.01'?true:false" @change="(e) => stateChange(e,record)" />
				</span>
        <template slot="renderAction" slot-scope="{ text, record }">
          <a style="margin-right: 5px" @click="() => handleEdit(record)" :disabled=" record.uuid =='838F5DB389604C84BCD7418867FB3AF9' ? true : false">{{$ct("edit","编辑")}}</a>
          <a style="margin-right: 5px" @click="() => handleSub(record)" :disabled=" record.uuid =='838F5DB389604C84BCD7418867FB3AF9' ? true : false" :class="record.uuid == '838F5DB389604C84BCD7418867FB3AF9' ? '' : 'action-delete'">{{$ct("delete","删除")}}</a>
        </template>
      </DataGrid>

      <!-- dialog	 -->
      <edit-form
				ref="createModal"
				:visible="visible"
				:loading="confirmLoading"
				:model="mdl"
				@cancel="handleCancel()"
				@ok="handleOk()"
				@dbtest="dbtest()"
      />
    </div>
  </div>
</template>


<!--script-->
<script>
  //数据表格组件
  import {DataGrid} from "@/components";
  //方法封装
  import {dataGridMixin} from "@/mixins/dataGridMixin";
  //新增编辑界面
  import editForm from './edit.vue'
  //字典
  import TDictSelectTag from '@/components/TopVUI/dict/TDictSelectTag'
  import TMultiSelectTag from '@/components/TopVUI/dict/TMultiSelectTag'

  export default {
    name: "Table",
    components: {DataGrid, editForm, TDictSelectTag, TMultiSelectTag},
    mixins: [dataGridMixin],
    data() {
      return {
        columns: [
          {
            title: '语言名称',
            width: 100,
            dataIndex: 'configKey',
						langCode: "languageName"
          },
          {
            title: '语言编码',
            width: 100,
            dataIndex: 'configValue',
						langCode: "languageCode"
          },
          {
            title: '默认语言',
            width: 100,
            dataIndex: 'configStatus',
						langCode: "defaultLanguage",
            scopedSlots: {
              customRender: "status",
            }
          },
					{
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            width: 200,
            scopedSlots: {
              customRender: 'renderAction'
            }
          }
        ],
        visible: false,
        confirmLoading: false,
        mdl: null,
        // 查询参数
        queryParam: {},
        url: {
          getPageSet: '/system/sysLanguageConfig/getPageSet',
          save: '/system/sysLanguageConfig/save',
          update: '/system/sysLanguageConfig/update',
          deleteBatch: '/system/sysLanguageConfig/deleteBatch'
        },
      };
    },
    methods: {
      stateChange(value,record){
        const that = this
        event.stopPropagation()
        that.$confirm({
          title: '是否确定将此语言设为默认语言?',
          content: '设置之后首次登录用户将按照默认语言进行界面显示',
          okText: '确定',
          cancelText: '取消',
          closable: true,
          icon: () => that.$createElement('a-icon', {
            props: {
              key: 'warning',
              type: 'exclamation-circle',
              twoToneColor: '#faad14'
            }
          }),
          onOk() {
            let param = {
              uuid: record.uuid,
              configStatus: record.configStatus
            }
            that.$post("/system/sysLanguageConfig/updateConfigStatus",param).then((res) => {
              if(res.statusCode === 200){
                that.$message.success(res.message, 1.5)
                that.$refs.table.refresh()
              }else{
                that.$message.warn(res.message, 1.5)
              }
            })
          },
          onCancel() {},

        });


      },

    },
    filters: {

    },

  };
</script>

<!--style-->
<style scoped lang="less">
  .table {
    background-color: @base-bg-color;
    padding: 24px;
  }
</style>

